import React, {useEffect} from 'react';
import {Field, Form, Grid, Icon, Input, Message, NumberPicker, Select, Switch, Upload} from "@alifd/next";


const FormItem = Form.Item;
const {Row, Col} = Grid;
const {Option} = Select;

const Index = (props) => {
    const {itemData,onChangeData} = props;

    let field = Field.useField({
        onChange:()=>{
            onChangeData(field.getValues())
        }
    });

    useEffect(()=>{
        field.setValues(itemData)
    },[itemData])

    const onDragOver = () => {
        console.log("dragover callback");
    }

    const onDrop = (fileList) => {
        console.log("drop callback : ", fileList);
    }

    const beforeUpload = (file, options) => {
        if (!["image/png", "image/jpg", "image/jpeg"].includes(file.type)) {
            Message.warning(`文件格式不正确！`);
            return false;
        }
        if (file.size > 50 * 1024 * 1024) {
            Message.warning(`文件大小必须小于50M`);
            return false;
        }
        return file;
    };

    const {init} = field;

    return (
        <div style={{margin: "0 auto", maxHeight: "100%", overflow: "auto"}}>
            <div className={"bg__title"}>图层设置——{itemData.filedId}</div>
            <Form style={{width: "80%", margin: "20px auto auto auto"}}>
                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="variable"
                            label="变量"
                        >
                            <Switch {...init('variable', {valueName: "checked"})}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="variableName"
                            label="变量名"
                        >
                            <Input {...init('variableName', {initValue: itemData.filedId})}/>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem
                    name="bgImage"
                    label="图片"
                    required
                    requiredMessage="请上传背景图片！"
                >
                    <Upload.Dragger
                        listType="image"
                        action={`${window.appConfig.servicePath}/minio/upload`}
                        accept="image/png, image/jpg, image/jpeg"
                        onDragOver={onDragOver}
                        onDrop={onDrop}
                        limit={1}
                        beforeUpload={beforeUpload}
                        {...init("bgImage")}
                    >
                        <div className="next-upload-drag">
                            <p className="next-upload-drag-icon">
                                <Icon type="upload"/>
                            </p>
                            <p className="next-upload-drag-text">
                                点击或拖动文件到虚线框内上传
                            </p>
                            <p className="next-upload-drag-hint">支持 PNG，JPG，JPEG 等类型的文件，50MB以内</p>
                        </div>
                    </Upload.Dragger>

                </FormItem>

                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="location"
                            label="位置"
                            required
                        >
                            <Row gutter={16}>
                                <Col>
                                    <NumberPicker label="x:"{...init('positionX')}
                                                  style={{width: "100%"}}/>
                                </Col>
                                <Col>
                                    <NumberPicker label="y:"{...init('positionY')}
                                                  style={{width: "100%"}}/>
                                </Col>
                            </Row>
                        </FormItem>
                    </Col>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="setCenter"
                                    label="居中绘制"
                                >
                                    <Switch autoWidth {...init('setCenter', {valueName: "checked"})}/>
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="setRotate"
                                    label="旋转"
                                >
                                    <NumberPicker defaultValue="0" innerAfter="°" min="0" max="360"
                                                  hasTrigger={false} {...init('setRotate')} style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="setDirection"
                            label="绘制方向"
                            required
                        >
                            <Select
                                hasClear
                                id="direction"
                                style={{
                                    width: "100%"
                                }}
                                {...init('setDirection')}
                            >
                                <Option value="LeftRight">LeftRight</Option>
                                <Option value="RightLeft">RightLeft</Option>
                                <Option value="CenterLeftRight">CenterLeftRight</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="setAlpha"
                                    label="透明度"
                                >
                                    <NumberPicker min="0" max="1" step="0.001" {...init('setAlpha')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="setRoundCorner"
                                    label="圆角"
                                >
                                    <NumberPicker min="0"{...init('setRoundCorner')} style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="setBlur"
                            label="高斯模糊"
                        >
                            <NumberPicker min="0" {...init('setBlur')} style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="setZoom"
                            label="缩放"
                        >
                            <Switch autoWidth {...init('setZoom', {valueName: "checked", initValue: false})}/>
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="setZoom_setWidth"
                            label="x"
                        >
                            <NumberPicker disabled={!field.getValue("setZoom")}  {...init('setZoom_setWidth')}
                                          style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="setZoom_setHeight"
                            label="y"
                        >
                            <NumberPicker disabled={!field.getValue("setZoom")}  {...init('setZoom_setHeight')}
                                          style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="ZoomMode"
                            label="ZoomMode"
                        >
                            <Select
                                hasClear
                                id="ZoomMode"
                                style={{width: "100%"}}
                                {...init('setZoom_ZoomMode')}
                                disabled={!field.getValue("setZoom")}
                            >
                                <Option value="ZoomMode.Origin">Origin</Option>
                                <Option value="ZoomMode.Width">Width</Option>
                                <Option value="ZoomMode.Height">Height</Option>
                                <Option value="ZoomMode.WidthHeight">WidthHeight</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>


                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="setRepeat"
                            label="平铺绘制"
                        >
                            <Switch autoWidth {...init('setRepeat', {valueName: "checked"})}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="repeatPaddingHorizontal"
                            label="repeatPaddingHorizontal"
                        >
                            <NumberPicker
                                disabled={!field.getValue("setRepeat")} {...init('setRepeat_repeatPaddingHorizontal')}
                                style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="repeatPaddingVertical"
                            label="repeatPaddingVertical"
                        >
                            <NumberPicker
                                disabled={!field.getValue("setRepeat")} {...init('setRepeat_repeatPaddingVertical')}
                                style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
    );
};

export default Index;